<template>
  <div
    :class="{
      'mulitple-select-panel': true,
      'mulitple-select-panel-mobile': isMobile,
    }"
  >
    <div class="forward-button" @click="oneByOneForwardMessage">
      <Icon :file="ForwardEachIcon" :size="iconSize" />
      <span
        :class="{
          'forward-button-text': true,
          'forward-button-text-mobile': isMobile,
        }"
        >{{ TUITranslateService.t("TUIChat.逐条转发") }}</span
      >
    </div>
    <div class="forward-button" @click="mergeForwardMessage">
      <Icon :file="ForwardMergeIcon" :size="iconSize" />
      <span
        :class="{
          'forward-button-text': true,
          'forward-button-text-mobile': isMobile,
        }"
        >{{ TUITranslateService.t("TUIChat.合并转发") }}</span
      >
    </div>
    <div class="forward-button" @click="cancelMultipleSelect">
      <Icon class="cancel-button-icon" :file="AddIcon" :size="iconSize" />
      <span
        :class="{
          'forward-button-text': true,
          'forward-button-text-mobile': isMobile,
        }"
      >
        {{ TUITranslateService.t("TUIChat.取消") }}
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "../../../adapter-vue";
import { TUITranslateService } from "@tencentcloud/chat-uikit-engine";
import Icon from "../../common/Icon.vue";
const ForwardEachIcon =
  "https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/icon/forward-each.svg";
const ForwardMergeIcon =
  "https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/icon/forward-merge.svg";
const AddIcon =
  "https://pandauke.oss-cn-guangzhou.aliyuncs.com/static/img/assets/icon/add-circle.svg";
import { isMobile } from "../../../utils/env";

interface IEmits {
  (key: "oneByOneForwardMessage"): void;
  (key: "mergeForwardMessage"): void;
  (key: "toggleMultipleSelectMode"): void;
}

const emits = defineEmits<IEmits>();

const iconSize = ref(isMobile ? "25px" : "30px");

function oneByOneForwardMessage() {
  emits("oneByOneForwardMessage");
}

function mergeForwardMessage() {
  emits("mergeForwardMessage");
}

function cancelMultipleSelect() {
  emits("toggleMultipleSelectMode");
}
</script>

<style lang="scss" scoped>
:not(not) {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
}

.mulitple-select-panel {
  height: 196px;
  border-top: 1px solid #ebebeb;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #ebf0f6;

  &-mobile {
    height: 64px;
    padding-bottom: 15px;
    flex-direction: row;
    align-items: flex-end;
  }
}

.forward-button {
  justify-content: center;
  align-items: center;

  &-text {
    margin-top: 8px;
    font-size: 12px;

    &-mobile {
      margin-top: 2px;
    }
  }

  .cancel-button-icon {
    transform: rotate(45deg);
  }
}
</style>
